<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>.: Scotiabank | Tarjetas :.</title>
        
        <!--CSS Files-->
		<link rel="stylesheet" href="css/960_50col.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/tabs_css_jtools.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/tarjetas.css" type="text/css" media="all">
        
        <!--Javascript Files-->
		<script language="JavaScript" type="text/javascript" src="https://apps.scotiabank.com/inc/omnitureperu.js"></script>
		<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
        <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>        
		<script type="text/javascript" src="js/jquery.tools.min.js"></script>
        <script type="text/javascript">
			$(document).ready(function()
			{
				//home page
				$(".slidetabs").tabs(".images > div", {
	
					// enable "cross-fading" effect
					effect : 'fade',
					fadeOutSpeed : "slow",
	
					// start from the beginning after the last tab
					rotate : true,
					autoplay : true
	
						// use the slideshow plugin. It accepts its own configuration
				}).slideshow({autoplay: true, interval: 5000, clickable: false});
				
				$(".slidetabs1").tabs(".images > div", {

					// enable "cross-fading" effect
					effect : 'fade',
					fadeOutSpeed : "slow",

					// start from the beginning after the last tab
					rotate : true,
					autoplay : true

					// use the slideshow plugin. It accepts its own configuration
				}).slideshow({autoplay: true, interval: 5000, clickable: false});
				
				//navigation
				$("#top-menu > li ").addClass("level1");
				$("#top-menu  > li > ul > li ").addClass("level2");
				$("#top-menu  > li > ul > li > ul > li ").addClass("level3");
				$("#top-menu  > li > ul > li > ul > li > ul > li").addClass("level4");
	
				$("#top-menu .level1").hover(function() {
					$(this).find(".level2").stop(false,true).slideToggle(300);
				});
				
				//tarjetas
				$(".tarjeta").hover(function()
					{
						clearInterval(timer);
						$(".tarjeta").find("img:first").stop(true, false).animate({top:"50px"},500,function(){
						$(this).parent().parent().css({overflow:"hidden"});
						$(this).parent().parent().find(".cont").stop(false,true).slideUp();
						});
											
						$(this).find("img:first").stop(true, false).animate({top:"0"},500,function(){
									$(this).parent().parent().css({overflow:"visible"});
									$(this).parent().parent().find(".cont").stop(false,true).slideDown();
							});						
					}, function()
					{
						$(this).find("img:first").stop(true, false).animate({top:"50px"},500,function(){
									$(this).parent().parent().css({overflow:"hidden"});
									$(this).parent().parent().find(".cont").stop(false,true).slideUp();
							});						
					
				});
				
				//mes
				$(".mes").click(function()
					{
						$(".mes").removeClass("selec");
						$(this).addClass("selec");
				});
				//cargar parallax
				$("#parallax_tarjetas").load("tarjetas.html");
				
				generarSecuencia();
				var timer = setInterval(function(){cambiarTarjeta()}, 6000);
			});
			
			var indice = 0;
			var orden = new Array();
			
			//
			function cambiarTarjeta()
			{
				var _tarjeta = $(".tarjeta").eq(orden[indice]);				
				$(".tarjeta").find("img:first").stop(true, false).animate({top:"50px"},500,function(){
				$(this).parent().parent().css({overflow:"hidden"});
				$(this).parent().parent().find(".cont").stop(false,true).slideUp();
				});
				
				_tarjeta.find("img:first").animate({top:"0"},500,function(){
				$(this).parent().parent().css({overflow:"visible"});
				$(this).parent().parent().find(".cont").slideDown();
				});	
				
				indice++;
				if(indice > 4)
				{
					generarSecuencia();
					indice = 0;
				}
			}
			
			//
			function generarSecuencia()
			{
				orden[0] = Math.round(Math.random() * 4);
				while(orden[0] == orden[4])
				{
					orden[0] = Math.round(Math.random() * 4);
				}
				for(var i = 0; i < 5; i++)
				{
					orden[i] = -1;
				}
				for(var i = 0; i < 5; i++)
				{
					while(orden[i] < 0)
					{
						orden[i] = Math.round(Math.random() * 4);
						for(var j = 0; j < i; j++)
						{
							if(orden[i] == orden[j])
								orden[i] = -1;
						}
					}
				}				
			}
		</script>
        
        <script type="text/javascript">
			//seleccion de tarjeta
			function mostrar(i)
			{
				var winWidth = $(window).width();
				$("#parallax_tarjetas").fadeIn();
				switch(i)
				{
					case 0:
						$('ul.main').css({left:0});
						$('ul.photos').css({left:0});
						break;					
					case 1:
						$('ul.main').css({left:winWidth * -1});
						$('ul.photos').css({left:winWidth * -1});
						break;
					case 2:
						$('ul.main').css({left:winWidth * -2});
						$('ul.photos').css({left:winWidth * -2});
						break;
					case 3:
						$('ul.main').css({left:winWidth * -3});
						$('ul.photos').css({left:winWidth * -3});
						break;
					default:
						break;	
				}
			}
		</script>
        
        <script type="text/javascript">
			$(document).ready(function() {
                if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
			 		var ieversion=new Number(RegExp.$1)
					if (ieversion<=7) {
						document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">')
						document.write('<html>')
						document.write('<head>')
						document.write('<meta http-equiv="Content-Type" content="text/html; charset=utf-8">')
						document.write('<title>.: Scotiabank | Tarjetas :.</title>')
						document.write('</head>')
						document.write('<body style="text-align:center; width:100%;">')
						document.write('<img align="center" src="img/scotiabank_logo.png">')
						document.write('<p style="width:400px; font-family:Calibri; color:#666;" align="center"><b>Estas usando Internet Explorer 7 o una versión más antigua, para poder ver correctamente el contenido de esta página actualiza tu navegador.')
						document.write('Te recomendamos usar <a target="_blank" href="http://windows.microsoft.com/es-ES/internet-explorer/products/ie/home"> Internet Explorer 9 </a>, <a target="_blank" href="http://www.mozilla.org/es-ES/firefox/fx/"> Firefox </a> o <a target="_blank" href="https://www.google.com/intl/es/chrome/browser/?hl=es"> Chrome</a></b></p>');
						document.write('</body>')
						document.write('</html>')
					}
				}
            });			
		</script>
    </head>
    
    <body>
    	<div class="container_50">
        	<div id="header" class="grid_50">

				<div class="grid_20 alpha">
					<a id="logo" href="index.html"><img alt="Scotiabank | Premium" border="0" src="img/scotiabank_logo.png"></a>
				</div>

				<div class="grid_30 omega">
					<ul id="top-menu">
						<li>
						<a href="#">Visita también <span class="red_arrow">&#32;</span></a>
							<ul>
								<li>
									<div class="cont">
										<img class="arrow" alt="cream arrow" src="img/cream_arrow.png">
										<ol>
											<li>
												<a target="_blank" href="http://www.scotiabank.com.pe/">Sitio oficial de Scotiabank</a>
											</li>
											<li>
												<a target="_blank" href="http://www.scotiapuntos.com.pe/">Scotiapuntos</a>
											</li>
											<li>
												<a target="_blank" href="http://www.scotiabank.com.pe/clubsueldo/">Clubsueldo</a>
											</li>
											<li>
												<a target="_blank" href="http://www.scotiabank.com.pe/tarjetas/">Tarjetas</a>
											</li>
										</ol>
									</div>
								</li>
							</ul>

						</li>
						<li>
							|
						</li>

						<li>
							<a href="#" target="_blank">Preguntas y respuestas</a>							
						</li>
                        <li>
							|
						</li>

						<li>
							<a href="#" target="_blank">Contáctenos</a>							
						</li>
					</ul>

				</div>

			</div>
            
            <div id="menu_tarjetas" class="grid_50">
            	<div class="sombra">
                	&#32;
                </div>
                <div class="tarjeta alpha">
                	<a href="#"><img src="photos/tarjeta_debito.png" alt="Tarjeta de débito"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjeta de débito</h3>
					</div>
                </div>
                <div class="tarjeta">
                	<a href="#"><img src="photos/tarjeta_visa.png" alt="Tarjetas Visa"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjetas Visa</h3>
						<ol>
							<li>
								<a href="#" onclick="mostrar(0)">Clásica</a>
							</li>
							<li>
								<a href="#" onclick="mostrar(1)">Oro</a>
							</li>
							<li>
								<a href="#" onclick="mostrar(2)">Platinum</a>
							</li>
							<li>
								<a href="#" onclick="mostrar(3)">Signature</a>
							</li>
						</ol>
					</div>
                </div>
                <div class="tarjeta">
                	<a href="#"><img src="photos/tarjeta_mastercard.png" alt="Tarjetas Mastercard"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjetas Mastercard</h3>
						<ol>
							<li>
								<a href="#">Clásica</a>
							</li>
							<li>
								<a href="#">Oro</a>
							</li>
							<li>
								<a href="#">Platinum</a>
							</li>
							<li>
								<a href="#">Black</a>
							</li>
						</ol>
					</div>
                </div>
                <div class="tarjeta">
                	<a href="#"><img src="photos/tarjeta_jockey.png" alt="Tarjeta Jockey"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjeta Jockey</h3>
					</div>
                </div>
                <div class="tarjeta omega">
                	<a href="#"><img src="photos/tarjeta_empresarial.png" alt="Tarjetas Empresariales"></a>
                    <div class="cont">						
                        <img class="arrow" alt="arrow" src="img/cream_arrow.png">
                        <h3>Tarjetas Empresariales</h3>
						<ol>
							<li>
								<a href="#">Business Mastercard</a>
							</li>
							<li>
								<a href="#">Corporate Visa</a>
							</li>
						</ol>
					</div>
                </div>
            </div>
            
            <div class="spacer-10">
            	&#32;
            </div>
            
            <div id="contenido" class="grid_50">
                <div class="grid_41 alpha">
                	<div class="grid_41 alpha">
                    	<img src="img/titulo_mirate.png" alt="Promociones día a día">
                    </div>
                    
                    <div class="spacer-10">
                    	&#32;
                    </div>
                    
                    <div class="grid_41 alpha">
                    	<div id="contenido_2" class="grid_41 alpha">
                        	<div class="grid_41 alpha">
                            	<div class="mes selec">
                                	<a href="#">ENE</a>
                                </div>
                                <div class="mes">
                                	<a href="#">FEB</a>
                                </div>
                                <div class="mes">
                                	<a href="#">MAR</a>
                                </div>
                                <div class="mes">
                                	<a href="#">ABR</a>
                                </div>
                                <div class="mes">
                                	<a href="#">MAY</a>
                                </div>
                                <div class="mes">
                                	<a href="#">JUN</a>
                                </div>
                                <div class="mes">
                                	<a href="#">JUL</a>
                                </div>
                                <div class="mes">
                                	<a href="#">AGO</a>
                                </div>
                                <div class="mes">
                                	<a href="#">SET</a>
                                </div>
                                <div class="mes">
                                	<a href="#">OCT</a>
                                </div>
                                <div class="mes">
                                	<a href="#">NOV</a>
                                </div>
                                <div class="mes">
                                	<a href="#">DIC</a>
                                </div>
                            </div>
                            
                            <div class="spacer-10">
                            	&#32;
                            </div>
                            
                            <div class="grid_41 alpha">
                                <div id="contenido_3">
                                    <div class="slider">
                                        <img src="photos/eventos_1_s.jpg" alt="foto1">
                                        <div class="caption">
                                            <p>
                                                <span style="font-family:'ScotiabankModernBold';">15/01/2012 -  La segunda entrega de Sherlock Holmes</span> estuvo muy buena¡,
                                                gracias por divertirse con nosotros el pasado jueves 12 en este evento especial realizado para tu ustedes.
                                                Sigan realizando sus comprar con sus Tarjetas de Crédito Scotiabank que este 2012 tenemos muchas sorpresas más.
                                            </p>
                                        </div>
                                        <div class="foto">
                                            <a href="#">&#32;</a>
                                        </div>
                                        <div class="video">
                                            <a href="#">&#32;</a>
                                        </div>
                                    </div>
                                    
                                    <div class="items">
                                        <!-- 1 - 4 -->
                                        <div>
                                            <div class="item">
                                                <a href="#"><img src="photos/eventos_2_t.jpg" alt="foto2"></a>
                                            </div>
                                            <div class="item omega">
                                               	<a href="#"><img src="photos/eventos_3_t.jpg" alt="foto3"></a>
                                            </div>
                                            <div class="item">
                                                <a href="#"><img src="photos/eventos_4_t.jpg" alt="foto4"></a>
                                            </div>
                                            <div class="item omega">
                                                <a href="#"><img src="photos/eventos_5_t.jpg" alt="foto5"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="btn_scroll">
                                    <a href="#">&#32;</a>
                                    <a href="#">&#32;</a>
                                    <a href="#" class="active">&#32;</a>
                                    <a href="#">&#32;</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="spacer-10">
                    	&#32;
                    </div>
                    
                    <div class="grid_41 alpha">
                    	<div class="grid_11 alpha">
                        	<div class="cuadro_int">
                            	<!--<div id="slider2">
                                    <!-- "previous slide" button 
                                    <a class="backward">prev</a>
            
                                    <!-- container for the slides 
                                    <div class="images">
            
                                        <!-- first slide 
                                        <div>
                                            <h4>Ofertón</h4>
                                            
                                            <p>
                                                Membresía de 3 meses<br> 16, 200 Puntos<br>
                                                ------------------- ó -------------------<br>
                                                6, 600 Puntos + S/. 350 Tarjeta</span>
                                            </p>
                                        </div>
            
                                        <!-- second slide 
                                        <div>
                                            <h4>Ofertón</h4>
                                            
                                            <p>
                                                Membresía de 6 meses<br> 30, 000 Puntos<br>
                                                ------------------- ó -------------------<br>
                                                15, 000 Puntos + S/. 400 Tarjeta</span>
                                            </p>
                                        </div>
            
                                    </div>
            
                                    <!-- "next slide" button 
                                    <a class="forward">next</a>
            
                                    <!-- the tabs 
                                    <div class="slidetabs1">
                                        <a href="#">1</a>
                                        <a href="#">2</a>
                                    </div>
                                </div>-->
                                <h4>Ofertón</h4>
                               	<a href="#">ver más &gt;&gt;</a>
                            </div>
                        </div>
                        
                        <div class="grid_10">
                            <div class="cuadro_int selec">
                                <img src="img/cuadro_mirate.png" alt="Mírate">
                                <p>
                                    Fotos de nuestros eventos
                                </p>
                            </div>
                    	</div>
                        <div class="grid_10">
                            <div class="cuadro_int">
                                <img src="img/cuadro_promociones.png" alt="Promociones">
                                <div class=spacer-10>
                                	&#32;
                                </div>
                                <a href="promociones.html">ver más &gt;&gt;</a>
                            </div>
                    	</div>
                    	<div class="grid_10 omega">                    	
                            <div class="cuadro_int">
                                <img src="img/cuadro_aprende.png" alt="Aprende">
                                <div class=spacer-10>
                                	&#32;
                                </div>
                                <a href="aprende.html">ver más &gt;&gt;</a>
                            </div>
                    	</div>
                        
                    </div>
                </div>
                
                <div id="cuponera" class="grid_9 omega">
                    <a href="cuponera.html"><img src="img/cuponera.png" alt="Cuponera"></a>
                </div>
            </div>
            
            <div class="spacer-10">
				&#32;
			</div>

			<div id="footer" class="grid_50">

				<ul id="bottom-menu">
					<li>
						<a href="javascript:abreventana('http://www.scotiabank.com.pe/acercade/terminos_condiciones.shtml','term','width=636,height=400,scrollbars=yes,top=100,left=125');">Términos y Condiciones</a>
					</li>
					<li>
						|
					</li>
					<li>
						<a href="javascript:abreventana('http://www.scotiabank.com.pe/popup_sbs.html','tarif','width=510,height=450,scrollbars=no,top=100,left=125');">SBS Ley de Transparencia</a>
					</li>
					<li>
						<a target="_blank" href="http://www.sbs.gob.pe/0/modulos/JER/JER_Interna.aspx?ARE=0&amp;PFL=1&amp;JER=892">( Reglamento</a>
					</li>
					<li>
						/
					</li>
					<li>
						<a target="_blank" href="http://www.sbs.gob.pe/0/modulos/JER/JER_Interna.aspx?ARE=0&amp;PFL=0&amp;JER=154">Tasas )</a>
					</li>
					<li>
						|
					</li>
					<li>
						<a target="_blank" href="http://www.dcf.com.pe/">Defensoría del Cliente</a>
					</li>
					<li>
						|
					</li>
					<li>
						<a target="_blank" href="http://www.ocn.gob.pe/">OCN Perú</a>
					</li>
				</ul>

			</div>
        </div>
        
        <div id="parallax_tarjetas">
        	&#32;
        </div>
    </body>
</html>
